<template>
  <div>
    <div style="height:50px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;">
      <el-radio-group v-model="currentCase" size="small" @change="$router.push('/demo/layout-tree')">
      </el-radio-group>
    </div>
    <div style="height:calc(100vh - 100px);">
      <RelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
      />
    </div>
  </div>
</template>

<script>
import RelationGraph from 'relation-graph'
export default {
  name: 'Demo',
  components: { RelationGraph },
  data() {
    return {
      currentCase: '纵向树状图谱',
      isShowCodePanel: false,
      graphOptions: {
        "layouts": [
            {
            "label": "中心",
            "layoutName": "tree",
            "layoutClassName": "seeks-layout-center",
            "defaultJunctionPoint": "border",
            "defaultNodeShape": 0,
            "defaultLineShape": 1,
            "centerOffset_x": "0",
            "centerOffset_y": "0",
            "from": "left",
            "levelDistance": "300,300,300,300",
            "min_per_width": "300",
            "max_per_width": "300"
            }
        ],
        "defaultLineMarker": {
            "markerWidth": 12,
            "markerHeight": 12,
            "refX": 6,
            "refY": 6,
            "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
        },
        "defaultExpandHolderPosition": "right",
        "defaultLineShape": 4,
        "defaultJunctionPoint": "lr",
        "defaultNodeWidth": "137",
        "defaultNodeHeight": "39",
        "defaultNodeColor": "rgba(32, 34, 31, 1)",
        "defaultNodeBorderColor": "#100F0F"
        }
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
  methods: {
    showSeeksGraph(query) {
      var __graph_json_data = {
           'rootId': '1', 
           'nodes': [
            {
                id: '1', 
                text: '客户标签体系',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">客户标签体系</div>'
            },
            {
                id: '2',
                text: '组织客户',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">组织客户</div>'
            },
            {
                id: '4',
                text: '基础属性',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">基础属性</div>'
            },
            {
                id: '5',
                text: '组织属性',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">组织属性</div>'
            },
            {
                id: '9',
                text: '位置信息',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">位置信息</div>'
            },
            {
                id: '21',
                text: '行为特征',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">行为特征</div>'
            },
            {
                id: '3',
                text: '自然人客户',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">自然人客户</div>'
            },
            {
                id: '30',
                text: '基础属性',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">基础属性</div>'
            },
            {
                id: '31',
                text: '个人属性',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">个人属性</div>'
            },
            {
                id: '35',
                text: '行为特征',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">行为特征</div>'
            },
            {
                id: '37',
                text: '客户评估',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">客户评估</div>'
            },
            {
                id: '19',
                text: '设备标签体系',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">设备标签体系</div>'
            },
            {
                id: '22',
                text: '设备属性',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">设备属性</div>'
            },
            {
                id: '23',
                text: '台账属性',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">台账属性</div>'
            },
            {
                id: '24',
                text: '物理属性',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">物理属性</div>'
            },
            {
                id: '38',
                text: '生产特征',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">生产特征</div>'
            },
            {
                id: '20',
                text: '项目标签体系',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">项目标签体系</div>'
            },
            {
                id: '26',
                text: '基础属性',
                hasChilren: true,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">基础属性</div>'
            },
            {
                id: '27',
                text: '基本属性',
                hasChilren: false,
                nodeShape: 0,
                html: '<div style="width:137px;height:36px;border-radius: 18px;border:#ff8c00 solid 2px;line-height:36px ">基本属性</div>'
            }
            ], 
           'links': [ 
            { from: '1', to: '2' },
            { from: '1', to: '3' },
            { from: '2', to: '4' },
            { from: '2', to: '21' },
            { from: '4', to: '5' },
            { from: '4', to: '9' },
            { from: '3', to: '30' },
            { from: '3', to: '35' },
            { from: '3', to: '37' },
            { from: '30', to: '31' },
            { from: '19', to: '22' },
            { from: '19', to: '38' },
            { from: '22', to: '23' },
            { from: '23', to: '24' },
            { from: '20', to: '26' },
            { from: '26', to: '27' }
            ] }
      __graph_json_data.nodes.forEach(thisNode => {
          if (thisNode.hasChilren == false) {
              thisNode.expandHolderPosition = 'right'
              thisNode.expanded = false
          }
      })
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
</style>